<!DOCTYPE html> 
<html>
	<head>
		<meta charset="utf-8">
		<title>Documentation for Sky Mega Menu</title>
		
		<meta name="viewport" content="width=1024">
		
		<link rel="stylesheet" href="css/main.css">
		
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script src="js/main.js"></script>
	</head>
	<body id="overview">
		<article>
			<!-- overview -->
			<section>
				<h1>Sky Mega Menu Documentation</h1>
				<p>Sky Mega Menu is a clean, responsive solution for creation beautiful site navigations. The drop down relies only on CSS/XHTML and comes with 3 mobile versions, different positions, 9 beautiful color schemes, commonly used forms, grid system and much more.</p>
				<p>If you have any questions that are beyond the scope of this documentation, please feel free to email via my user page contact form <a href="http://codecanyon.net/user/voky?ref=voky">here</a>.</p>
			</section>
			<!--/ overview -->
			
			<!-- integration -->
			<section id="integration">
				<h2>Integration</h2>
				<ol>
					<li>Download the zipped pack from codecanyon and extract to a folder on your computer.</li>
					<li>Include css and js files to your project.
<pre>&lt;link rel=&quot;stylesheet&quot; href=&quot;css/font-awesome.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/sky-mega-menu.css&quot;&gt;

&lt;!--[if lt IE 9]&gt;
	&lt;link rel=&quot;stylesheet&quot; href=&quot;css/sky-mega-menu-ie8.css&quot;&gt;
	&lt;script src="http://html5shim.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
&lt;![endif]--&gt;

&lt;!--[if lt IE 10]&gt;
	&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js&quot;&gt;&lt;/script&gt;
	&lt;script src=&quot;js/jquery.placeholder.min.js&quot;&gt;&lt;/script&gt;
&lt;![endif]--&gt;</pre>
					</li>
					<li>Copy HTML code from one of the demo files.</li>
					<li>Replace demo content with yours.</li>
				</ol>
			</section>
			<!--/ integration -->
			
			<!-- html structure -->
			<section id="html">
				<h2>HTML structure</h2>
				<p>The main HTML structure of the menu consists of list items, that can contain another nested items. Each item contains link, and optional icon. Here is the basic structure:</p>
<pre>&lt;ul class=&quot;sky-mega-menu sky-mega-menu-anim-flip sky-mega-menu-response-to-icons&quot;&gt;
	&lt;!-- home --&gt;
	&lt;li&gt;
		&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-single icon-home&quot;&gt;&lt;/i&gt;&lt;/a&gt;
	&lt;/li&gt;
	&lt;!--/ home --&gt;
	
	&lt;!-- about --&gt;
	&lt;li class=&quot;current&quot;&gt;
		&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-star&quot;&gt;&lt;/i&gt;About us&lt;/a&gt;
		&lt;div class=&quot;grid-container3&quot;&gt;
			&lt;ul&gt;
				&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-globe&quot;&gt;&lt;/i&gt;Mission&lt;/a&gt;&lt;/li&gt;
				&lt;li&gt;
					&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-group&quot;&gt;&lt;/i&gt;Our Team&lt;/a&gt;
					&lt;div class=&quot;grid-container3&quot;&gt;
						&lt;ul&gt;
							&lt;li&gt;
								&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-user&quot;&gt;&lt;/i&gt;Markus Fisher&lt;/a&gt;
								&lt;div class=&quot;grid-container3&quot;&gt;
									&lt;ul&gt;
										&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-leaf&quot;&gt;&lt;/i&gt;About&lt;/a&gt;&lt;/li&gt;
										&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-tasks&quot;&gt;&lt;/i&gt;Skills&lt;/a&gt;&lt;/li&gt;
										&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-comments&quot;&gt;&lt;/i&gt;Contacts&lt;/a&gt;&lt;/li&gt;
									&lt;/ul&gt;
								&lt;/div&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-user&quot;&gt;&lt;/i&gt;Leyla Sparks&lt;/a&gt;
								&lt;div class=&quot;grid-container3&quot;&gt;
									&lt;ul&gt;
										&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-leaf&quot;&gt;&lt;/i&gt;About&lt;/a&gt;&lt;/li&gt;
										&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-tasks&quot;&gt;&lt;/i&gt;Skills&lt;/a&gt;&lt;/li&gt;
										&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-comments&quot;&gt;&lt;/i&gt;Contacts&lt;/a&gt;&lt;/li&gt;
									&lt;/ul&gt;
								&lt;/div&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-user&quot;&gt;&lt;/i&gt;Gleb Ismailov&lt;/a&gt;
								&lt;div class=&quot;grid-container3&quot;&gt;
									&lt;ul&gt;
										&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-leaf&quot;&gt;&lt;/i&gt;About&lt;/a&gt;&lt;/li&gt;
										&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-tasks&quot;&gt;&lt;/i&gt;Skills&lt;/a&gt;&lt;/li&gt;
										&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-comments&quot;&gt;&lt;/i&gt;Contacts&lt;/a&gt;&lt;/li&gt;
									&lt;/ul&gt;
								&lt;/div&gt;
							&lt;/li&gt;
							&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-user&quot;&gt;&lt;/i&gt;Viktoria Gibbers&lt;/a&gt;
						&lt;/li&gt;
						&lt;/ul&gt;
					&lt;/div&gt;
				&lt;/li&gt;
				&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-trophy&quot;&gt;&lt;/i&gt;Rewards&lt;/a&gt;&lt;/a&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-certificate&quot;&gt;&lt;/i&gt;Certificates&lt;/a&gt;&lt;/a&gt;&lt;/li&gt;
			&lt;/ul&gt;
		&lt;/div&gt;
	&lt;/li&gt;
	&lt;!--/ about --&gt;
	
	&lt;!-- portfolio --&gt;
	&lt;li&gt;
		&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-briefcase&quot;&gt;&lt;/i&gt;Portfolio&lt;/a&gt;
		&lt;div class=&quot;grid-container3&quot;&gt;
			&lt;ul&gt;
				&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-lemon&quot;&gt;&lt;/i&gt;Logos&lt;/a&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-globe&quot;&gt;&lt;/i&gt;Websites&lt;/a&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-th-large&quot;&gt;&lt;/i&gt;Branding&lt;/a&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-picture&quot;&gt;&lt;/i&gt;Illustrations&lt;/a&gt;&lt;/li&gt;
			&lt;/ul&gt;
		&lt;/div&gt;
	&lt;/li&gt;
	&lt;!--/ portfolio --&gt;
	
	&lt;!-- blog --&gt;
	&lt;li&gt;
		&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-edit&quot;&gt;&lt;/i&gt;Blog&lt;/a&gt;
	&lt;/li&gt;
	&lt;!--/ blog --&gt;
	
	&lt;!-- contacts --&gt;
	&lt;li class=&quot;right&quot;&gt;
		&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-phone&quot;&gt;&lt;/i&gt;Contacts&lt;/a&gt;
	&lt;/li&gt;
	&lt;!--/ contacts --&gt;
&lt;/ul&gt;</pre>
			</section>
			<!--/ html structure -->
			
			<!-- css structure -->
			<section id="css">
				<h2>CSS structure</h2>
				<p>Sky Mega Menu includes 11 css files.</p>
				<ul>
					<li><strong>demo.css</strong> - demo page styles</li>
					<li><strong>sky-mega-menu.css</strong> - required main styles</li>
					<li><strong>sky-mega-menu-ie8.css</strong> - styles for IE8</li>
					<li><strong>sky-mega-menu-red.css</strong> - red color scheme</li>
					<li><strong>sky-mega-menu-orange.css</strong> - orange color scheme</li>
					<li><strong>sky-mega-menu-green.css</strong> - green color scheme</li>
					<li><strong>sky-mega-menu-purple.css</strong> - purple color scheme</li>
					<li><strong>sky-mega-menu-pink.css</strong> - pink color scheme</li>
					<li><strong>sky-mega-menu-yellow.css</strong> - yellow color scheme</li>
					<li><strong>sky-mega-menu-blue.css</strong> - blue color scheme</li>
					<li><strong>sky-mega-menu-black.css</strong> - black color scheme</li>
				</ul>
				<p>The file "sky-mega-menu.css" contains all of the specific styling and separated into sections:</p>
				<ul>
					<li>defaults</li>
					<li>level 1</li>
					<li>level 2+</li>
					<li>positions</li>
					<li>animations</li>
					<li>grid</li>
					<li>icons</li>
					<li>forms</li>
					<li>pad</li>
					<li>phone</li>
				</ul>
				<p>If you would like to edit a specific section, simply find the appropriate label in the CSS file.</p>
			</section>
			<!--/ css structure -->
			
			<!-- js files -->
			<section id="js">
				<h2>JavaScript files</h2>
				<p>This menu uses <strong>jQuery library</strong> and <strong>jQuery placeholder plugin</strong>. These files need only for placeholder support in IE8 and IE9, so don't include them if you are not using forms.</p>
			</section>
			<!--/ js files -->
			
			<!-- schemes -->
			<section id="schemes">
				<h2>Color schemes</h2>
				<p>There are 9 color schemes at your disposal. Cyan is the default scheme and to choose other you need to include appropriate css file. For example, if you want to use orange scheme include <strong>sky-mega-menu-orange.css</strong> file:</p>
<pre>&lt;link rel=&quot;stylesheet&quot; href=&quot;css/sky-mega-menu.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/sky-mega-menu-orange.css&quot;&gt;
&lt;!--[if lt IE 9]&gt;
	&lt;link rel=&quot;stylesheet&quot; href=&quot;css/sky-mega-menu-ie8.css&quot;&gt;
	&lt;script src="http://html5shim.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
&lt;![endif]--&gt;

&lt;!--[if lt IE 10]&gt;
	&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js&quot;&gt;&lt;/script&gt;
	&lt;script src=&quot;js/jquery.placeholder.min.js&quot;&gt;&lt;/script&gt;
&lt;![endif]--&gt;</pre>
			</section>
			<!--/ schemes -->	
			
			<!-- mobile versions -->
			<section id="mobile">
				<h2>Mobile versions</h2>
				<p>Mega Menu includes 3 different responsive versions: icons, stack and switcher. To choose one of them you need to add specific class to the main container: <strong>sky-mega-menu-response-to-switcher</strong>, <strong>sky-mega-menu-response-to-stack</strong> or <strong>sky-mega-menu-response-to-icons</strong>. If you don't want to use responsiveness just do not add any of these classes.</p>
<pre>&lt;ul class=&quot;sky-mega-menu sky-mega-menu-response-to-icons&quot;&gt;
	&lt;!-- home --&gt;
	&lt;li&gt;
		&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-home&quot;&gt;&lt;/i&gt;Home&lt;/a&gt;
	&lt;/li&gt;
	&lt;!--/ home --&gt;
	
	...
	
	&lt;!-- contacts --&gt;
	&lt;li class=&quot;right&quot;&gt;
		&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-phone&quot;&gt;&lt;/i&gt;Contacts&lt;/a&gt;
	&lt;/li&gt;
	&lt;!--/ contacts --&gt;
&lt;/ul&gt;</pre>
				<p>Also, when you are using <strong>switcher</strong> version you need to add additional element:</p>
<pre>&lt;ul class=&quot;sky-mega-menu sky-mega-menu-response-to-icons&quot;&gt;
	&lt;!-- home --&gt;
	&lt;li&gt;
		&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-home&quot;&gt;&lt;/i&gt;Home&lt;/a&gt;
	&lt;/li&gt;
	&lt;!--/ home --&gt;
	
	&lt;!-- switcher --&gt;
	&lt;li class=&quot;switcher&quot;&gt;
		&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-reorder&quot;&gt;&lt;/i&gt;Menu&lt;/a&gt;
	&lt;/li&gt;
	&lt;!--/ switcher --&gt;
	
	...
	
	&lt;!-- contacts --&gt;
	&lt;li class=&quot;right&quot;&gt;
		&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-phone&quot;&gt;&lt;/i&gt;Contacts&lt;/a&gt;
	&lt;/li&gt;
	&lt;!--/ contacts --&gt;
&lt;/ul&gt;</pre>
			</section>
			<!--/ mobile versions -->
			
			<!-- animations -->
			<section id="animations">
				<h2>Animations</h2>
				<p>The default animations effect is <strong>fade</strong> and there are 3 additional classes for choosing animations: <strong>sky-mega-menu-anim-scale</strong>, <strong>sky-mega-menu-anim-flip</strong>, <strong>sky-mega-menu-anim-slide</strong>. For example, if you want <strong>scale</strong> animation effect:</p>
<pre>&lt;ul class=&quot;sky-mega-menu sky-mega-menu-anim-scale&quot;&gt;
	&lt;!-- home --&gt;
	&lt;li&gt;
		&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-home&quot;&gt;&lt;/i&gt;Home&lt;/a&gt;
	&lt;/li&gt;
	&lt;!--/ home --&gt;
	
	...
	
	&lt;!-- contacts --&gt;
	&lt;li class=&quot;right&quot;&gt;
		&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-phone&quot;&gt;&lt;/i&gt;Contacts&lt;/a&gt;
	&lt;/li&gt;
	&lt;!--/ contacts --&gt;
&lt;/ul&gt;</pre>
			</section>
			<!--/ animations -->
			
			<!-- positions -->
			<section id="positions">
				<h2>Positions</h2>
				<p>To change menu position you need to add one of 3 classes: <strong>sky-mega-menu-pos-right</strong>, <strong>sky-mega-menu-pos-bottom</strong>, <strong>sky-mega-menu-pos-left</strong>. If you need fixed version of the menu add <strong>sky-mega-menu-fixed</strong> class to the menu element:</p>
<pre>&lt;ul class=&quot;sky-mega-menu sky-mega-menu-pos-left sky-mega-menu-fixed&quot;&gt;
	&lt;!-- home --&gt;
	&lt;li&gt;
		&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-home&quot;&gt;&lt;/i&gt;Home&lt;/a&gt;
	&lt;/li&gt;
	&lt;!--/ home --&gt;
	
	...
	
	&lt;!-- contacts --&gt;
	&lt;li class=&quot;right&quot;&gt;
		&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-phone&quot;&gt;&lt;/i&gt;Contacts&lt;/a&gt;
	&lt;/li&gt;
	&lt;!--/ contacts --&gt;
&lt;/ul&gt;</pre>
			</section>
			<!--/ positions -->
			
			<!-- icons -->
			<section id="icons">
				<h2>Icons</h2>
				<p>There are 361 font icons included. To use one of them you need to add &lt;i&gt; tag with appropriate class. For example, if we need user icon:</p>
<pre>&lt;li&gt;
	&lt;a&gt;&lt;i class=&quot;icon-user&quot;&gt;&lt;/i&gt;Profile&lt;/a&gt;
&lt;/li&gt;</pre>
				<p>All available classes for icons you can find <a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank">here</a>.</p>
			</section>
			<!--/ icons -->
			
			<!-- credits -->
			<section id="credits">
				<h2>Credits</h2>
				<ol>
					<li><a href="http://jquery.com" target="_blank">jQuery library</a> by The jQuery Foundation</li>
					<li><a href="http://matoilic.github.com/jquery.placeholder" target="_blank">jQuery placeholder plugin</a> by Mato Ilic</li>
					<li><a href="http://fortawesome.github.com/Font-Awesome/" target="_blank">Font Awesome</a> by Dave Gandy</li>
				</ol>
			</section>
			<!--/ credits -->
		</article>
		
		<aside>
			<!-- logo -->
			<img src="img/thumbnail.png" alt="" />
			<!--/ logo -->
			
			<!-- main nav -->
			<nav id="main-nav">
				<ul>
					<li><a href="#overview">Overview</a></li>
					<li><a href="#integration">Integration</a></li>
					<li><a href="#html">HTML structure</a></li>
					<li><a href="#css">CSS structure</a></li>
					<li><a href="#js">JavaScript files</a></li>
					<li><a href="#schemes">Color schemes</a></li>
					<li><a href="#mobile">Mobile versions</a></li>
					<li><a href="#animations">Animations</a></li>
					<li><a href="#positions">Positions</a></li>
					<li><a href="#icons">Icons</a></li>
					<li><a href="#credits">Credits</a></li>
				</ul>
			</nav>
			<!--/ main nav -->
			
			<!-- copyrights -->
			<p>Created by <a href="http://codecanyon.net/user/voky?ref=voky">Voky</a></p>
			<!--/ copyrights -->
		</aside>
	</body>
</html>